<template>
    <div class="books-container">
        <hr>
        <div class="book-list">
            <router-link to="/audio-play" v-for="item of bookList" :key="item.id">
                <div class="book-item">
                    <img :src="item.isPlaying?playingIcon:pauseIcon" />
                    <div class="book-content">
                        <p :class="{'book-title-playing':item.isPlaying}">
                            文学| 为什么抱怨科技没有食堂?
                        </p>
                        <div class="book-bottom">
                            <span :class="{'book-datetime':item.isPlaying}">{{item.isPlaying?'最新':'2018/08/11'}}</span>
                            <span class="book-state">时长02:11 | 未学习</span>
                        </div>
                    </div>
                </div>
                <hr>
            </router-link> 
                <button :class="{subscribe:isSubscribe}" @click="subscribe">订阅</button> 
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      playingIcon: "../../src/images/ic_playing.png",
      pauseIcon: "../../src/images/ic_pause.png",
      bookList: [
        { id: 1, isPlaying: true },
        { id: 2, isPlaying: false },
        { id: 3, isPlaying: false },
        { id: 4, isPlaying: false },
        { id: 5, isPlaying: false },
        { id: 6, isPlaying: false },
        { id: 7, isPlaying: false },
        { id: 8, isPlaying: false },
        { id: 9, isPlaying: false },
        { id: 10, isPlaying: false },
        { id: 11, isPlaying: false }
      ],
      isSubscribe : true
    }
  },
  methods:{
      subscribe(){
          //TODO 订阅代码
          Toast('订阅')
      }
  }
};
</script>

<style lang="scss" scoped>
.books-container {
  hr {
    height: 1px;
    background: rgb(227, 227, 227);
    border: 0;
  }
  .book-list {
    display: flex;
    flex-direction: column;
    padding-bottom: 58px;
    hr {
      height: 1px;
      background: rgb(227, 227, 227);
      border: 0;
      margin: 0 10px;
      box-sizing: border-box;
    }
  }
  .book-item {
    display: flex;
    flex-direction: row;
    padding: 20px;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      margin: auto 10px auto 0;
    }
  }
  .book-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      line-height: 14px;
      margin: 0 0 6px 0;
      font-size: 14px;
      color: rgb(51, 51, 51);
    }
    .book-title-playing {
      color: rgb(255, 163, 47);
    }
  }
  .book-bottom {
    margin: 6px 0 0px 0;
    line-height: 12px;
    span {
      font-size: 12px;
      color: rgb(102, 102, 102);
      margin-right: 10px;
    }
    .book-datetime {
      font-size: 12px;
      border: 1px solid;
      border-radius: 5px;
      padding: 1px 5px;
      color: red;
      margin-right: 10px;
    }
  }
  button {
    z-index: 99999;
    position: fixed;
    height: 58px;
    color: white;
    font-size: 16px;
    width: 100%;
    bottom: 0px;
    border: 0;
    background-color: rgb(255, 163, 47);
  }
  .subscribe{
    background-color: rgb(230, 230, 230);
  }
   
} 
.book-subscribe:focus{outline:0;} 
</style>
